<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html><head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>站点布局模板 (web.py)</title> 
  <link rel="stylesheet" type="text/css" href="/static/webpy-new.css"/> 
  <link rel="SHORTCUT ICON" href="/static/favicon.ico"/> 
</head><body> 
 
        <div id="header"><table class="header"><tr>
                <td class="logo"><a href="/" title="Home"><img src="/static/webpy.gif" alt="" /></a></td> 
<td class="blurb">&ldquo;Think about the ideal way to write a web app.<br />Write the code to make it happen.&rdquo; [<a href="/philosophy">more...</a>]</td> </tr>
</table>
        </div> 
        <div id="location"> 
                <a href="/">home</a> &gt; 站点布局模板
        </div> 
<div id="container"> 
<div id="sidebar">
<strong>get started:</strong>
<ul class="body">
  <li><a href="/install">install</a></li>
  <li><a href="/docs/0.3/tutorial">tutorial</a></li>
</ul>
<strong>learn more:</strong>
<ul class="body">
<li><a href="/docs/0.3/api">api reference</a></li>
<li><a href="/cookbook/">cookbook</a></li>
<li><a href="/src/">code examples</a></li>
</ul>

<strong>dive in:</strong>
<ul class="body"> 
<li><a href="https://github.com/webpy/webpy">source code</a></li>
<li><a href="http://groups.google.com/group/webpy/">mailing list</a></li>
<li><a href="https://github.com/webpy/webpy/issues">issue tracker</a></li>
</ul>
</div>

<div id="main"> 
<div id="content" class="body"> 
<h1>站点布局模板</h1>

<h3>问题</h3>

<p>如何让站点每个页面共享一个整站范围的模板？（在某些框架中，称为模板继承，比如ASP.NET中的母版页）</p>

<h3>方法</h3>

<p>我们可以用 base 属性来实现:</p>

<pre><code>render = web.template.render('templates/', base='layout')
</code></pre>

<p>现在如果你调用<code>render.foo()</code>方法，将会加载<code>templates/foo.html</code> 模板，并且它将会被 <code>templates/layout.html</code>模板包裹。</p>

<p> "layout.html" 是一个简单模板格式文件，它包含了一个模板变量，如下:</p>

<pre><code>$def with (content)
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Foo&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
$:content
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>在某些情况，如果不想使用基本模板，只需要创建一个没有base属性的reander对象，如下：</p>

<pre><code>render_plain = web.template.render('templates/')
</code></pre>

<h3>Tip: 在布局文件（layout.html）中定义的页面标题变量，如何在其他模板文件中赋值，如下:</h3>

<h5>templates/index.html</h5>

<pre><code>$var title: This is title.

&lt;h3&gt;Hello, world&lt;/h3&gt;
</code></pre>

<h5>templates/layout.html</h5>

<pre><code>$def with (content)
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;$content.title&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
$:content
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<h3>Tip: 在其他模板中引用css文件，如下:</h3>

<h4>templates/login.html</h4>

<pre><code>$var cssfiles: static/login.css static/login2.css

hello, world.
</code></pre>

<h4>templates/layout.html</h4>

<pre><code>$def with (content)
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;$content.title&lt;/title&gt;

    $if content.cssfiles:
        $for f in content.cssfiles.split():
            &lt;link rel="stylesheet" href="$f" type="text/css" media="screen" charset="utf-8"/&gt;

&lt;/head&gt;
&lt;body&gt;
$:content
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>输入的HTML代码如下:</p>

<pre><code>&lt;link rel="stylesheet" href="static/login.css" type="text/css" media="screen" charset="utf-8"/&gt;
&lt;link rel="stylesheet" href="static/login2.css" type="text/css" media="screen" charset="utf-8"/&gt;
</code></pre>

<div style="clear: both;"></div> 
 
</div> 
 
</div> 
</div>
        <div id="footer"> 
    <p>started by <a style="color: gray;" href="http://www.aaronsw.com/">Aaron Swartz</a> (<a style="color: black;" href="mailto:webpy@aaronsw.com">webpy@aaronsw.com</a>)</p>

<p><a href="https://github.com/webpy/webpy.github.com/blob/master/cookbook/layout_template.zh-cn.md">fork this page on GitHub</a></p>
</div> 
 
</body> 
</html> 
